<template>
    <div class="header"  >
        <div class="content-wrapper">
            <div class="avatar">
                <img :src="mage.avatar" width="64" height="64" >
            </div>
            <div class="content">
                <div class="title">
                    <span class="brand"></span>
                    <span class="name">{{mage.name}}</span>
                </div>
                <div class="description">
                   {{mage.description}}/{{mage.deliveryTime}}分钟送达
                </div>
                <div class="support" v-if="mage.supports">
                    <span class="icon" :class="classMap[mage.supports[0].type]"></span>
                    <span class="text">{{mage.supports[0].description}}</span>
                </div>
            </div>
            <div class="support-count" v-if="mage.supports" @click="showDetail">
                <span class="count">{{mage.supports.length}}个</span>
                <i class="icon-keybord_arrow_rigth1">></i>
            </div>
        </div>
        <div class="bulletin-wrapper" @click="showDetail">
            <span class="bulletin-title"></span>
            <span class="bulletin-text" ref="count">{{mage.bulletin}}</span>
            <i class="icon-keybord_arrow_rigth">></i>
        </div>
        <div class="background">
            <img :src="mage.avatar" height="100%" width="100%" alt="">
        </div>
        <transition name="fade">
        <div v-show="detailShow" class="detail">
           <div class="detail-wrapper clearfix">
           <div class="detail-main">
               <h1 class="name">{{mage.name}}</h1>
               <div class="star-wrapper">
                   <star :size="48" :score="mage.score"></star>
               </div>
               <div class="tite">
                   <div class="line"></div>
                   <div class="text">优惠信息</div>
                   <div class="line"></div>
               </div>
               <ul v-if="mage.supports" class="supports">
                   <li class="supports-item" v-for="(item,index) of mage.supports" :key="item.id">
                     <span class="icon" :class="classMap[index]"></span>
                     <span class="text">{{mage.supports[index].description}}</span>
                   </li>
               </ul>
               <div class="tite">
                   <div class="line"></div>
                   <div class="text">商家公告</div>
                   <div class="line"></div>
               </div>
               <div class="bulletin">
                   <p class="conut">{{mage.bulletin}}</p>
               </div>
           </div>
           </div>
            <div class="detail-close" @click="closeDetail">
                <i class="icon-close"></i>
            </div>
        </div>
        </transition>
    </div>
</template>

<script>
import star from "./star";
export default {
  name: "aheader",
  data() {
    return {
      classMap: ["decrease", "discount", "guarantee", "invoice", "special"],
      detailShow: false,
      over: ""
    };
  },
  props: ["mage"],
  mounted() {
    console.log(this.mage);
  },
  methods: {
    showDetail() {
      this.detailShow = true;
    },
    closeDetail() {
      this.detailShow = false;
    }
  },
  components: {
    star
  }
};
</script>

<style lang="stylus">
    @import "../assets/css/mixin.styl"
.header
    position relative
    overflow hidden
    color #fff
    background-color rgba(7,17,27,.5)
    .content-wrapper
       position relative
       padding 24px 12px 18px 24px
       font-size 0
       .avatar
          display inline-block
          vertical-align top
          img
            border-radius 2px;
       .content
          display inline-block
          margin-left 16px
          .title
             margin 2px 0 8px 0
             .brand
                 width 30px
                 height:18px
                 display inline-block
                 vertical-align  top
                 bg-imge('./../assets/img/brand')
                 background-size 30px 18px
                 background-repeat:no-repeat
              .name
                 margin-left 6px
                 font-size 16px
                 font-weight bold
                 line-height 18px
          .description
             margin-bottom 10px
             line-height 12px
             font-size 12px

          .support
            .icon
               display inline-block
               vertical-align top
               width:12px;
               height:12px;
               margin-right 4px;
               background-size 12px 12px
               background-repeat no-repeat
               &.decrease
                  bg-imge('../assets/img/decrease_1')
               &.discount
                   bg-imge('../assets/img/discount_1')
               &.guarantee
                   bg-imge('../assets/img/guarantee_1')
               &.invoice
                   bg-imge('../assets/img/invoice_1')
               &.special
                   bg-imge('../assets/img/special_1')
            .text
               line-height 12px
               font-size 10px;


       .support-count
          position absolute
          right 12px
          bottom: 18px
          padding 0 8px
          line-height 24px
          height 24px
          border-radius 14px;
          background-color rgba(0,0,0,0.2)
          text-align center
          .count
             font-size 12px;
             font-weight 200
          .icon-keybord_arrow_rigth1
             font-size 12px;
             margin-left 2px;


    .bulletin-wrapper
       position relative
       height 28px
       line-height 29px
       padding 0 22px 0 12px;
       white-space nowrap
       overflow hidden
       text-overflow ellipsis
       background rgba(7,17,27,.2)
       .bulletin-title
          display inline-block
          vertical-align top
          margin-top 8px;
          width 22px
          height 12px
          bg-imge('../assets/img/bulletin')
          background-size 22px 12px
          background-repeat no-repeat
       .bulletin-text
          font-weight 200
          font-size 11px
          vertical-align top
       .icon-keybord_arrow_rigth
          position absolute
          font-size 11px
          right 12px
          top: 9px;

    .background
        position absolute
        top:0
        left 0
        width 100%
        height 100%
        z-index -1
        filter blur(10px)
    .detail
        position fixed
        z-index 100
        top: 0
        left 0
        width 100%
        height 100%
        overflow auto
        opacity 1
        background-color rgba(7,17,27,.8)
        backdrop-filter blur(10px)
        &.fade-enter-active, &.fade-leave-active
          transition: all 2s
          opacity 1
          background-color rgba(7,17,27,.8)
        &.fade-enter, &.fade-leave-to
          opacity: 0
          background: rgba(7, 17, 27, 0)
        .detail-wrapper
           min-height 100%
           width 100%
           .detail-main
              margin-top 64px
              padding-bottom 64px
              color rgb(255,255,255)
              .name
                 line-height 16px
                 text-align center
                 font-size 16px
                 font-weight 700
              .star-wrapper
                 margin-top 18px
                 padding 2px 0
                 text-align center
               .tite
                   display flex
                   width:80%
                   margin 28px auto 24px auto
                   .line
                      flex 1
                      position relative
                      top:-6px
                      border-bottom 1px solid rgba(225,255,255,.2)
                   .text
                     padding 0 12px
                     font-weight 700
                     font-size 14px
               .supports
                   width 80%
                   margin 0 auto
                   list-style none
                   .supports-item
                       padding 0 12px
                       margin-bottom 12px
                       font-size 0
                       &:last-child
                          margin-bottom 0
                       .icon
                         display inline-block
                         width 16px
                         height 16px
                         vertical-align top
                         margin-right 6px
                         background-size 16px 16px
                         background-repeat no-repeat
                         &.decrease
                            bg-imge('../assets/img/decrease_2')
                         &.discount
                            bg-imge('../assets/img/discount_2')
                         &.guarantee
                            bg-imge('../assets/img/guarantee_2')
                         &.invoice
                            bg-imge('../assets/img/invoice_2')
                         &.special
                            bg-imge('../assets/img/special_2')
                       .text
                         line-height 16px;
                         font-size 12px;
               .bulletin
                   width: 80%
                   margin 0 auto
                   padding 0 12px
                   line-height 24px
                   font-size 12px;

        .detail-close
           position relative
           width 32px
           height 32px;
           margin -64px auto 0 auto
           clear both
           font-size 32px



</style>
